<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="top"
           :class="isEdit?'':'formItem'">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">更换轮胎信息(正常更换轮胎)</span>
      </div>

      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="预计更换轮胎开始时间:" prop="expectStartTime">
            <el-date-picker type="date" v-model="ruleForm.expectStartTime" v-if="isEdit"
                            value-format='yyyy-MM-dd' style="width: 100%;"
                            placeholder="选择预计更换轮胎开始时间">
            </el-date-picker>
            <span v-else>{{ ruleForm.expectStartTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="预计更换轮胎结束时间:" prop="expectEndTime">

            <el-date-picker type="date" v-model="ruleForm.expectEndTime" v-if="isEdit"
                            value-format='yyyy-MM-dd' style="width: 100%;"
                            placeholder="选择预计更换轮胎结束时间">
            </el-date-picker>
            <span v-else>{{ ruleForm.expectEndTime }}</span>

          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
            <el-form-item label="签约保养厂/保养厂:" prop="maintenanceShopId">
              <el-select v-if="isEdit" v-model="ruleForm.maintenanceShopId"
                         filterable
                         @change="handleChange" style="width: 100%"
                         placeholder="请选择签约保养厂/保养厂">
                <el-option v-for="item in options" :key="item.supplierId" :label="item.supplierName"
                           :value="item.supplierId"/>
              </el-select>
              <span v-else>{{ ruleForm.maintenanceShop }}</span>
            </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="故障现象:" prop="faultPhenomenon">
            <el-input v-if="isEdit" v-model="ruleForm.faultPhenomenon" placeholder="输入故障现象"></el-input>
            <span v-else>{{ ruleForm.faultPhenomenon }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="维修厂故障诊断:" prop="maintenanceFaultDiagnosis">
            <el-select v-model="  ruleForm.maintenanceFaultDiagnosis" placeholder="选择维修厂故障诊断"
                       style="width: 100%;"
                       v-if="isEdit">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
            <span v-else>{{
                ruleForm.maintenanceFaultDiagnosis == "1" ? '是' : ruleForm.maintenanceFaultDiagnosis == "2" ? '否' : ''
              }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="维修厂报价:" prop="maintenanceQuoter">
            <el-input v-if="isEdit" v-model="ruleForm.maintenanceQuoter"
                      disabled   v-thousand
                      @change="changeAmount('maintenanceQuoter')"
                      placeholder="输入维修厂报价"></el-input>
            <span v-else>{{ format_thousand(ruleForm.maintenanceQuoter) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="是否符合索赔理由:" prop="reasonForClaim">
            <el-select v-model="  ruleForm.reasonForClaim" placeholder="选择是否符合索赔理由" style="width: 100%;"
                       v-if="isEdit">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
            <span v-else>{{
                ruleForm.reasonForClaim == "1" ? '是' : ruleForm.reasonForClaim == "2" ? '否' : ''
              }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="是否有同车型(处置车辆)对换配件:">
            <el-select v-model="  ruleForm.swappingAccessories" placeholder="选择是否有同车型(处置车辆)对换配件"
                       style="width: 100%;"
                       v-if="isEdit">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
            <span v-else>{{
                ruleForm.swappingAccessories == "1" ? '是' : ruleForm.swappingAccessories ==
                "2" ? '否' : ''
              }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow &&   ruleForm.reasonForClaim == '2'">
          <el-form-item label="不符合索赔理由:">
            <el-input v-if="isEdit" v-model="  ruleForm.claimantReason" placeholder="输入不符合索赔理由"></el-input>
            <span v-else>{{ ruleForm.claimantReason }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col v-if="isShow" :span="24">
          <el-form-item label="综合建议方案:" prop="comprehensiveRecommendations">
            <el-input v-if="isEdit" placeholder="输入综合建议方案" type="textarea" :rows="4"
            :maxlength="500"  v-model="  ruleForm.comprehensiveRecommendations"></el-input>
            <span v-else>{{ ruleForm.comprehensiveRecommendations }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col v-if="isShow" :span="24">
          <el-form-item label="备注:">
            <el-input v-if="isEdit" placeholder="输入备注" type="textarea" :rows="4"
            :maxlength="500"  v-model="  ruleForm.normalRemark"></el-input>
            <span v-else>{{ ruleForm.normalRemark }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>


  </el-form>
</template>

<script>
import {effectTime} from "@/utils/libs/effectDate.js"
import {getInsuranceSelectList} from "@/api/cwgd/insuranceSelect";
export default {
  name: 'tireBasiceInfo',

  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    }
  },
  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('input', {...target, [key]: value})
            return true
          }
        })
        return proxy
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
    top() {
      if (this.isEdit) {
        return 'top'
      } else {
        return 'right'
      }
    }
  },
  watch: {
    'value.unitPrice': {
      handler(val) {
        if (val) {
          this.handleCount()
        }
      },
      immediate: true,
      deep: true,

    }
  },

  data() {
    var validateAnnexUrl = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请上传附件'));
      } else {
        callback();
      }
    };
    var start = (rule, value, callback) => {
      let that = this
      effectTime(rule, value, callback,
          that.ruleForm.expectStartTime,
          that.ruleForm.expectEndTime,
          '预计更换轮胎开始时间',
          '预计更换轮胎结束时间'
      )
    };
    var end = (rule, value, callback) => {
      let that = this
      effectTime(rule, value, callback,
          that.ruleForm.expectStartTime,
          that.ruleForm.expectEndTime,
          '预计更换轮胎开始时间',
          '预计更换轮胎结束时间'
      )
    };
    return {
      isShow: true,
      rules: {
        expectStartTime: [{required: this.state === 'write', validator: start, trigger: 'change'}],
        expectEndTime: [{required: this.state === 'write', validator: end, trigger: 'change'}],
        maintenanceShopId: [{required: this.state === 'write', message: '请输入签约保养厂/保养厂', trigger: 'blur'}],
        faultPhenomenon: [{required: this.state === 'write', message: '请输入故障现象', trigger: 'blur'}],
        maintenanceQuoter: [{required: this.state === 'write', message: '请输入维修厂报价', trigger: 'blur'}],
        reasonForClaim: [{required: this.state === 'write', message: '请选择是否符合索赔理由', trigger: 'change'}],
        comprehensiveRecommendations: [{
          required: this.state === 'write',
          message: '请输入综合建议方案',
          trigger: 'change'
        }],
        maintenanceFaultDiagnosis: [{
          required: this.state === 'write',
          message: '请选择维修厂故障诊断',
          trigger: 'change'
        }],

      },
      options: []
    };
  },

  created() {
  },
  mounted() {
    this.handleCount()
    this.handleList()
  },
  methods: {
    handleList() {
      getInsuranceSelectList({businessTypeCode: "4"}).then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        }
      });
    },

    handleChange(val) {
      this.value.maintenanceShopId = this.ruleForm.maintenanceShopId = val;
      this.value.maintenanceShop = this.ruleForm.maintenanceShop = this.options.find(
          (item) => item.supplierId === val
      ).supplierName;
    },

    handleCount() {
      let num = this.ruleForm.unitPrice * this.ruleForm.tyreNum || 0
      this.$set(this.value, 'maintenanceQuoter', num)
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve()
          } else {
            this.locateToErr()
            reject()
          }
        });
      })
    },
    locateToErr() {

      this.$nextTick(() => {
        let isError = document.getElementsByClassName('is-error')
        isError[0].scrollIntoView({
          // 滚动到指定节点
          // 值有start,center,end，nearest，当前显示在视图区域中间
          block: 'center',
          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
          behavior: 'smooth',
        })
      })
    },
    valid() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      })
    },
    changeAmount(str) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/
      if (str === 'tyreFigure' || str === 'tyreNum') {
        msg = /^[1-9]\d*$/
        if (!msg.test(this.ruleForm[str])) {
          this.ruleForm[str] = ""
        } else {
          this.ruleForm[str] = this.ruleForm[str].toString().match(/^[1-9]\d*$/)[0]
        }
      } else {
        if (!msg.test(this.ruleForm[str])) {
          this.ruleForm[str] = ""
        } else {
          this.ruleForm[str] = this.ruleForm[str].toString().match(/^\d+(?:\.\d{0,2})?/)[0]
        }
      }

    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

::v-deep .el-form-item__label {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #464646;
}

</style>


